<template>
  <svg class="svg-icon" aria-hidden="true" :style="style">
    <use :xlink:href="'#' + name" />
  </svg>
</template>

<script>
// 目的是为了引入所有的icon文件，webpack配置的loader才能生效
const req = require.context('@/assets/icon', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

export default {
  name: 'Icon',
  props: {
    name: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 48
    }
  },
  computed: {
    style () {
      return {
        width: this.size / 2 / 100 + 'rem',
        height: this.size / 2 / 100 + 'rem'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  display: block;
  fill: currentColor;
  overflow: hidden;
}
</style>
